import React from 'react';
import {
    View,
    Text,
    ScrollView,
    TouchableOpacity,
    Image,
    DeviceEventEmitter,
    Alert,
    StyleSheet,
    Dimensions,
    ImageBackground
} from 'react-native';
import ToastUtil from '../../utils/ToastUtil';
// import PDFView from 'react-native-pdf-view';
import Pdf from 'react-native-pdf';
import NavigationBar from "../../common/NavigationBar";
import GlobalStyles from "../../common/styles/GlobalStyles";
import baseUrl from "../../common/BASE_URL"
import HttpUtils from "../../expand/dao/HttpUtils";
import {BASE_URL} from '../../common/BASE_URL';
const getImg = BASE_URL.apiBaseUrl + '/api/text/pdfToImage'

export default class LookCasePdf extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            pdfImgUrl:"",
            page: 0, //当前第几页
            numberOfPages: 0, //pdf 共有几页
            isPdfDownload:false,
        }
    }
    async componentDidMount(){
        const wsPath=this.props.navigation.state.params.Url
        this.getImgFn(wsPath)
    }

    getImgFn(wsPath){
        const key = ToastUtil.loading('文书加载中...')
        HttpUtils.request({
            url: getImg,
            params: {
                wsPath
            }
        }).then(res=>{
            ToastUtil.remove(key)
            this.setState({
                pdfImgUrl:res.image
            })
        }).finally(()=>ToastUtil.remove(key))
    }



    render() {
        const wsPath=this.props.navigation.state.params.Url
        const {navigation} = this.props
        pdfImgUrl=this.state.pdfImgUrl
        
        // const source = {
        //     // uri: 'http://samples.leanpub.com/thereactnativebook-sample.pdf', //pdf 路径demo
        //     uri: `http://171.221.172.37:8663/file/${wsPath}`, //pdf 路径
        //     cache: true, // 是否需要缓存，默认 false
        //     expiration: 0, // 缓存文件过期秒数，默认 0 为未过期
        //     method: 'GET', //默认 'GET'，请求 url 的方式
        //     headers: {}, // 当 uri 是网址时的请求标头
        // };
        return (
            <View style={[GlobalStyles.pageContainer]}>
                <NavigationBar
                    navigation={navigation}
                    headerBackTitle={'预览文书'}
                />
                <View style={[GlobalStyles.innerTabPanel,{flexDirection: 'column',flex: 1}]}>
                     {pdfImgUrl?
                         <ScrollView>
                         {this._imgBoxItem()}
                      </ScrollView>:
                      <View style={{width:"100%",height:400,justifyContent:"center",alignItems:"center"}}>
                          <Text>
                             暂无文本
                          </Text>
                      </View>
                    }
                </View>
            </View>

            // <View style={styles.container}>
            //     <View style={{width:"100%",top:-25,left:0,position:"absolute",zIndex:10}}>
            //         <NavigationBar
            //             styles={{width:'100vw',background:"red"}}
            //             navigation={navigation}
            //             headerBackTitle={'预览文书'}
            //         />
            //     </View>
                
            //     <Pdf
            //         source={source}
            //         fitWidth={true} //默认 false，若为 true 则不能将 fitWidth = true 与 scale 一起使用
            //         fitPolicy={0} // 0:宽度对齐，1：高度对齐，2：适合两者（默认）
            //         page={1} //初始化第几页，1 开始
            //         scale={1} //页面加载出来 pdf 时的比例
            //         minScale={1} //最小模块
            //         maxScale={3} //最大模块
            //         onLoadComplete={(numberOfPages,filePath,width,height,tableContents)=>{
            //             // console.log(`number of pages: ${numberOfPages}`); //总页数
            //             // console.log(`number of filePath: ${filePath}`); //本地返回的路径
            //             // console.log(`number of width: `,JSON.stringify(width));
            //             // console.log(`number of height: ${JSON.stringify(height)}`);
            //             // console.log(`number of tableContents: ${tableContents}`);
            //         }}
            //         onPageChanged={(page,numberOfPages)=>{
            //             this.setState({
            //                 page:page,
            //                  numberOfPages:numberOfPages
            //             });
            //             // console.log(`current page: ${page}`); //返回当前页
            //             // console.log(`current numberOfPages: ${numberOfPages}`); //返回总页面，其实在 onLoadComplete() 可以获取到
            //             //所以不建议在这里获取总页数，因为页面滑动就会触发
            //         }}
            //         onError={(error)=>{
            //             console.log(error);
            //         }}
            //         password='111' //pdf 密码，如果密码错误，会触发 onError() 并显示密码不正确或需要密码
            //         spacing={10} // 页面之间的间隔大小，默认为 10
            //         horizontal={true} //横向
            //         activityIndicator={null}
            //         // activityIndi​​catorProps={{backgroundColor:'red'}} 文档里有这个属性，但是我看源码里面没有
            //         enablePaging={true} //在屏幕上只能显示一页
            //         enableAntialiasing={true} //在低分辨率屏幕上改进渲染，针对 Android 4.4 上可能会出现的一些问题
            //         enableRTL={false} //倒序滑动
            //         enableAnnotationRendering={true} //启用渲染注视，iOS 仅支持初始设置，不支持实时更改
            //         onLoadProgress={(number)=>console.log(number)} //加载时回调，返回加载进度（0-1）
            //         onPageSingleTap={()=>{
            //             // console.log('页面被点击的时候回调')
            //         }}
            //         onScaleChanged={()=>{
            //             // console.log('页面缩放的时候回调')
            //         }}
            //         style={styles.pdf}/>
            //     <Text>
            //         当前第 {this.state.page} 页，共 {this.state.numberOfPages} 页
            //     </Text>
            // </View>
        )
    }

    _imgBoxItem(){
        
        const pdfImgUrl=this.state.pdfImgUrl
        let imgArr=pdfImgUrl?pdfImgUrl.split(","):[]
        imgArr.forEach((item)=>{
            item=BASE_URL.apiBaseUrl+item
        })
        const views = []
        imgArr.map((item,index)=>{
            let control; 
            control=(
                <Image key={index} style={{width:"100%",height:500}} source={{uri:BASE_URL.apiBaseUrl+item+`?t=${new Date()}`}}></Image>
            )
            views.push(control)
        })
        return views
    }



}



const styles = StyleSheet.create({
    pdf:{
        flex:1,
        width:Dimensions.get('window').width,
        height:Dimensions.get('window').height,
    },
    container: {
        flex: 1,
        justifyContent: 'flex-start',
        alignItems: 'center',
        marginTop: 25,
        position:"relative"
    },
    // pdf: {
    //     flex: 1,
    //     width: Dimensions.get('window').width,
    // }
})